Instituto Federal de São Paulo (IFSP) Campus Bragança Paulista/SP Análise e Desenvolvimento de Sistemas (ADS) 5o. módulo Profa. Ana Paula Müller Giancoli paulagiancoli@ifsp.edu.br |
npx create-react-app reqhttp
************************************************
/* Exemplo importando Hooks no arquivo App.js */
************************************************
import React, { useState, useEffect } from 'react';
*************************************
/* Exemplo de Função no Javascript */
*************************************
function successCallback(result) {
console.log("It succeeded with " + result);
}
function failureCallback(error) {
console.log("It failed with " + error);
}
doSomething(successCallback, failureCallback);
*********************************************
/* Exemplo de Promise nas funções modernas */
*********************************************
const promise = doSomething();
promise.then(successCallback, failureCallback);
***********************************************************
/* Exemplo de Promise nas funções modernas simplificadas */
***********************************************************
doSomething().then(successCallback, failureCallback);
*********************************************************************
/* Exemplo do arquivo App.js com uso de Hook useEffect e Fetch API */
*********************************************************************
import './App.css';
import React, { useState, useEffect } from 'react';
function App() {
const [github, setGithub] = useState([]);
useEffect( () => {
function loadAPI() {
let url = 'https://api.github.com/users/anagiancoli/followers';
fetch(url)
.then( (resultado) => resultado.json() )
.then( (resjson)=> {
console.log(resjson);
setGithub(resjson);
})
}
loadAPI();
}, []);
return (
<div className="App">
<header className="App-header">
<strong>Seguidores Github</strong>
</header>
</div>
);
}
export default App;
*******************************************
/* Exemplo do arquivo App.css modificado */
*******************************************
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.App {
display: flex;
flex-direction: column;
width: 100%;
}
.App-header {
background-color: #282c34;
display: flex;
align-items: center;
justify-content: center;
height: 60px;
font-size: calc(10px + 2vmin);
color: white;
}
****************************************************************************
/* Exemplo array de pessoas com nome, sobrenome, idade, ano de nascimento */
****************************************************************************
const pessoas =
[
{nome: {primeiro: 'Ana', sobrenome: 'Giancoli'}, idade: 26, ano: 1995},
{nome: {primeiro: 'Paula', sobrenome: 'Müller'}, idade: 55, ano: 1966},
{nome: {primeiro: 'Ana Paula', sobrenome: 'Müller Giancoli'}, idade: 29, ano: 1992},
];
******************************************************
/* Exemplo de Função Javascript para mapear a idade */
******************************************************
function mapIdade(array) {
const mapa = []
for (let i = 0; i < array.length; i++) {
mapa.push(array[i].idade)
}
return mapa
}
const idades = mapIdade(pessoas); // [26, 55, 29]
************************************************************
/* Exemplo utilizando o método map( ) para mapear a idade */
************************************************************
const idades = pessoas.map(element => element.idade); // [26, 55, 29]
*******************************************
/* Exemplo do arquivo App.js modificado */
*******************************************
import './App.css';
import React, { useState, useEffect } from 'react';
function App() {
const [github, setGithub] = useState([]);
useEffect( () => {
function loadAPI() {
let url = 'https://api.github.com/users/anagiancoli/followers';
fetch(url)
.then( (resultado) => resultado.json() )
.then( (resjson)=> {
console.log(resjson);
setGithub(resjson);
})
}
loadAPI();
}, []);
return (
<div className="App">
<header className="App-header">
<img src={'https://github.com/anagiancoli.png'} className="capa"/>
<strong>Seguidores de Ana Giancoli no Github</strong>
</header>
{ github.map( (item) => {
return(
<article key={item.id} className="App-post">
<strong className="titulo">{item.login}</strong>
<img src={item.avatar_url} alt={item.login} className="capa"/>
<p className="subtitulo">{item.html_url}</p>
<a className="botao">Acessar</a>
</article>
)
})}
</div>
);
}
export default App;
*******************************************
/* Exemplo do arquivo App.css modificado */
*******************************************
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.App {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.App-header {
background-color: #282c34;
display: flex;
width: 100%;
align-items: center;
justify-content: center;
height: 60px;
font-size: calc(10px + 2vmin);
color: white;
}
body {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
}
.App-post {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 300px;
background-color: #fff;
border-radius: 5px;
border-width: 1px;
margin: 8px;
padding: 10px;
border: 2px solid #4c89e3;
}
.titulo {
font-size: 25px;
margin-top: 10px;
margin-bottom: 25px;
}
.subtitulo {
margin: 5px;
font-weight: bold;
color: #23af60;
padding: 10px 5px;
}
.capa {
width: 150px;
height: 150px;
border-radius: 50%;
}
.botao {
height: 40px;
background:none;
border-radius: 5px;
color: #4c89e3;
border: 2px solid #4c89e3;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-weight: bold;
padding: 1px 15px;
}
.botao:hover{
background-color: #4c89e3;
color: #fff;
}
npm install axios
*********************************
/* Arquivo src/services/api.js */
*********************************
import axios from "axios";
// Pode ser algum servidor executando localmente:
// http://localhost:3000
const api = axios.create({
baseURL: "https://api.github.com",
});
export default api;
****************************************
/* Exemplo de um arquivo usando axios */
****************************************
import api from '../services/api'
// Buscando usuários do github
api.get("users/anagiancoli")
.then((response) => doSomething(response.data))
.catch((err) => {
console.error("ops! ocorreu um erro" + err);
});
// Enviando um Post na rota posts com os parâmetros image, title e content
// Utilizando o método HTTP POST
const response = await api.post("posts", {image, title, content});
// DELETE - Deletando um arquivo por ID
api.delete('files', { id });
// PUT - atualizando apenas o nome
const personUpdated = await api.put(`person/${person.id}`, { name: "Ana" });
npm install react-router-dom
npx create-react-app meusite
********************
/* Arquivo App.js */
********************
import './App.css';
import Routes from './routes';
function App() {
return(
<div>
<Routes />
</div>
)
}
export default App;
*********************
/* Arquivo App.css */
*********************
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.App {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.App-header {
background-color: #282c34;
display: flex;
width: 100%;
align-items: center;
justify-content: space-around;
padding: 10px;
font-size: calc(10px + 2vmin);
color: white;
}
/* Adicionado para a página seguidores */
.App-seguidores {
background-color: #3ec986;
display: flex;
width: 100%;
align-items: center;
justify-content: space-around;
padding: 10px;
font-size: calc(10px + 2vmin);
color: white;
margin-bottom: 10px;
margin-top: 20px;
}
body {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
}
.App-post {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 300px;
background-color: #fff;
border-radius: 5px;
border-width: 1px;
margin: 8px;
padding: 10px;
border: 2px solid #4c89e3;
}
.titulo {
font-size: 25px;
margin-top: 10px;
margin-bottom: 25px;
}
.subtitulo {
margin: 5px;
font-weight: bold;
color: #23af60;
padding: 10px 5px;
}
.capa {
width: 150px;
height: 150px;
border-radius: 50%;
}
.botao {
height: 40px;
background:none;
border-radius: 5px;
color: #4c89e3;
border: 2px solid #4c89e3;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-weight: bold;
padding: 1px 15px;
}
.botao:hover{
background-color: #4c89e3;
color: #fff;
}
.formatamenu {
background-color:#EDEDED;
padding:0px;
margin:0px;
}
/* Adicionado para a montagem do menu no componente Header */
#menu ul {
padding:0px;
margin:0px;
list-style:none;
}
#menu ul li { display: inline; }
#menu ul li a {
padding: 2px 10px;
display: inline-block;
/* visual do link */
background-color:#EDEDED;
color: #333;
text-decoration: none;
border-bottom:3px solid #EDEDED;
}
#menu ul li a:hover {
background-color:#D6D6D6;
color: #6D6D6D;
border-bottom:3px solid #EA0000;
}
*************
/* Exemplo */
*************
<BrowserRouter
basename = "/meusite"
forceRefresh = {true}
getUserConfirmation = (message, callback) => {
// this is the default behavior
const allowTransition = window.confirm(message);
callback(allowTransition);
}
keyLength={6}
>
<App />
</BrowserRouter>
*************
/* Exemplo */
*************
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route } from "react-router-dom";
ReactDOM.render(
<BrowserRouter>
<div>
<Route exact path="/">
<Home />
</Route>
<Route path="/news">
<NewsFeed />
</Route>
</div>
</BrowserRouter>,
node
);
*************
/* Exemplo */
*************
<div>
<Home />
<!-- react-empty: 2 -->
</div>
*************
/* Exemplo */
*************
<div>
<!-- react-empty: 1 -->
<NewsFeed />
</div>
***************************
/* Arquivo src/routes.js */
***************************
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './pages/Home';
import Seguidores from './pages/Seguidores';
import Sobre from './pages/Sobre';
import Erro from './pages/Erro';
import Contato from './pages/Contato';
import Header from './components/Header';
const Routes = () => {
return(
<BrowserRouter>
<Header />
<Switch>
<Route exact path="/" component={Home}/>
<Route exact path="/seguidores" component={Seguidores}/>
<Route exact path="/sobre" component={Sobre}/>
<Route exact path="/contato" component={Contato}/>
<Route path="*" component={Erro}/>
</Switch>
</BrowserRouter>
)
}
export default Routes;
********************************************
/* Arquivo src/components/Header/index.js */
********************************************
import { Link } from 'react-router-dom';
export default function Header() {
return(
<div className="formatamenu">
<nav id="menu">
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/seguidores">Seguidores</Link></li>
<li><Link to="/contato">Contato</Link></li>
<li><Link to="/sobre">Sobre</Link></li>
</ul>
</nav>
<div className="App">
<header className="App-header">
<img src={'https://github.com/anagiancoli.png'} alt="" className="capa"/>
<strong> Profa. Ana Paula Müller Giancoli</strong>
</header>
</div>
</div>
)
}
****************************************
/* Arquivo src/pages/Contato/index.js */
****************************************
export default function Contato() {
return(
<div className="App">
<header className="App-seguidores">
<strong>Entre em contato</strong>
</header>
</div>
);
}
*************************************
/* Arquivo src/pages/Home/index.js */
*************************************
export default function Home() {
return(
<div className="App">
<header className="App-seguidores">
<strong>Home</strong>
</header>
</div>
);
}
**************************************
/* Arquivo src/pages/Sobre/index.js */
**************************************
export default function Sobre() {
return(
<div className="App">
<header className="App-seguidores">
<strong>Sobre</strong>
</header>
</div>
);
}
*******************************************
/* Arquivo src/pages/Seguidores/index.js */
*******************************************
import React, { useState, useEffect } from 'react';
export default function Seguidores() {
const [github, setGithub] = useState([]);
useEffect( () => {
function loadAPI() {
let url = 'https://api.github.com/users/anagiancoli/followers';
fetch(url)
.then( (resultado) => resultado.json() )
.then( (resjson)=> {
console.log(resjson);
setGithub(resjson);
})
}
loadAPI();
}, []);
return (
<div className="App">
<header className="App-seguidores">
<strong>Seguidores de Ana Giancoli no Github</strong> <----- Adequar
</header>
{ github.map( (item) => {
return(
<article key={item.id} className="App-post">
<strong className="titulo">{item.login}</strong>
<img src={item.avatar_url} alt={item.login} className="capa"/>
<p className="subtitulo">{item.html_url}</p>
<button className="botao">Acessar</button>
</article>
)
})}
</div>
);
}
*************************************
/* Arquivo src/pages/Erro/index.js */
*************************************
export default function Erro() {
return(
<div className="App">
<header className="App-seguidores">
<strong>Página não encontrada !!</strong>
</header>
</div>
);
}
ADS - HTML5, CSS3, JS, React, AWS - 5o. módulo.
Modelo e formato elaborado por profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2021.